import React from 'react'
// 在2020年之前，react开发几乎都用类组件，2019年年底react推出了hooks
// 在2020年之前函数组件只能做单纯得展示性组件，函数组件没有自己的状态,在react15.8之后推出了hooks，让函数组件可以模拟出状态和生命周期
// 函数组件语法简单，没有this问题，函数组件也有缺点，有些特定得生命周期还是模拟不出来的
// useEffect 叫做副作用钩子，可以来模拟类组件中的生命周期
import PropTypes from 'prop-types';
import {useEffect,useState,useMemo} from "react"
function Fun(props) {
    const person = useMemo(
        () => ({ name: "Rue", age: 17 }),
        [] //没有依赖关系，所以值不会改变
      );
      
    
    let [name,setName ] = useState({name:"lisi"})
   useEffect(()=>{
        console.log("我执行了");
        return ()=>{
            console.log("页面卸载得时候执行")
              // useEffeact得返回得函数里就相当于模拟出了componentWillUnmount这个生命周期
        }
   },[name]) // 当useEffeact第二个参数为一个空数组得时候可以模拟出componentDidMounted这个生命周期，一般情况用于发送网络请求，
           // 当useEffeact得中括号有值得时候就模拟出了componentDidUpdate，和vue的watch异曲同工
    useEffect(() => {
   
    }, [name]);

       

  return (
    <div>
        <span>{name.name}</span>
        <h1>{props.age}</h1>
        <button onClick={()=>{setName({name:"mazi"})}}>点我我修改name</button>
    </div>
  )
}
Fun.propTypes = {
    send: PropTypes.string
};
Fun.defaultProps = {
    age:4
}
export default Fun